<template>
  <div id="app">
    <el-container>
      <el-header class="Header">
        <div class="header-container">
          <el-form class="search-form" inline @submit.native.prevent="onSearch">
            <el-autocomplete
                class="search-input"
                v-model="searchQuery"
                :fetch-suggestions="fetchByQuery"
                :loading="loading"
                placeholder="知行合一"
                popper-class="autocomplete-option-popper"
                @select="handleSelect"
                suffix-icon="el-icon-search"
            >
              <template slot-scope="{ item }">
                <div style="display: flex; justify-content: space-between">
                  <span
                      style="
                      max-width: 280px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    "
                  >
                    {{ item.label }}
                  </span>
                  <span
                      style="
                      max-width: 80px;
                      color: #8492a6;
                      font-size: 13px;
                      white-space: nowrap;
                    "
                  >
                    <img
                        :src="getResourceInfo(item.resource).icon"
                        style="width: 16px; height: 16px; vertical-align: middle"
                    />
                    {{ getResourceInfo(item.resource).title }}
                  </span>
                </div>
              </template>
            </el-autocomplete>
          </el-form>
        </div>
      </el-header>
      <el-main>
        <el-row :gutter="10">
          <el-col :sm="24" :md="20" :lg="20" :xl="20">
            <el-row :gutter="10">
              <el-col :span="6" v-for="(board, index) in hotBoards"
                      :key="index"
                      :xs="24"
                      :sm="10"
                      :md="8"
                      :lg="6"
                      :xl="6">
                <hot-search-board
                    :title="board.title"
                    :icon="board.icon"
                    :fetch-url="board.fetchUrl"
                    :type="board.type"
                />
              </el-col>
            </el-row>
          </el-col>
          <el-col :xs="0" :sm="4" :md="4" :lg="4" :xl="4">
            <visitor-log />
            <holiday-calendar />
            <word-cloud />
          </el-col>
        </el-row>
      </el-main>
      <el-footer class="layout-footer-center">
        {{ sentence }} @billyang
      </el-footer>
    </el-container>

  </div>
</template>

<script>
import HotSearchBoard from "@/components/pc/HotSearchBoard.vue";
import VisitorLog from "@/components/pc/VisitorLog.vue";
import WordCloud from "@/components/pc/WordCloud.vue";
import HolidayCalendar from "@/components/pc/HolidayCalendar.vue";
import apiService from "@/config/apiService.js";
export default {
  name: "App",
  components: {
    HotSearchBoard,
    VisitorLog,
    WordCloud,
    HolidayCalendar,
  },
  data() {
    return {
      searchQuery: "",
      lastSearchQuery: "",
      suggestions: [],
      loading: false,
      currentPage: 1,
      pageSize: 20,
      selectedValue: [],
      sentence: "",
      hotBoards: [
        {
          title: "百度",
          icon: require("@/assets/icons/baidu-icon.svg"),
          type: "baidu",
        },
        {
          title: "抖音",
          icon: require("@/assets/icons/douyin-icon.svg"),
          type: "douyin",
        },
        {
          title: "知乎",
          icon: require("@/assets/icons/zhihu-icon.svg"),
          type: "zhihu",
        },
        {
          title: "B站",
          icon: require("@/assets/icons/bilibili-icon.svg"),
          type: "bilibili",
        },
        {
          title: "贴吧",
          icon: require("@/assets/icons/tieba-icon.svg"),
          type: "baidu_tieba",
        },
        {
          title: "微博",
          icon: require("@/assets/icons/weibo-icon.svg"),
          type: "weibo",
        },
        {
          title: "虎扑",
          icon: require("@/assets/icons/hupu-icon.svg"),
          type: "hupu",
        },
        {
          title: "掘金",
          icon: require("@/assets/icons/juejin-icon.svg"),
          type: "juejin",
        },
      ],
    };
  },
  created(){
    //查询心语
    this.fetchSentence();
  },
  methods: {
    getResourceInfo(resourceType) {
      const resource = this.hotBoards.find(
          (board) => board.type === resourceType.toLowerCase()
      );
      return resource || { icon: "", title: "" };
    },
    handleSelect(item) {
      if (item && item.url) {
        window.open(item.url, "_blank");
      }
      // 防止替换搜索框中的内容
      this.$nextTick(() => {
        this.searchQuery = this.lastSearchQuery;
      });
    },
    fetchSentence() {
      apiService
          .get("/welcome/querySentence")
          .then((res) => {
            // 处理响应数据
            this.sentence = res.data.data.sentence;
          })
          .catch((error) => {
            // 处理错误情况
            console.error(error);
          });
    },
    fetchByQuery(query, callback) {
      if (query !== "") {
        this.loading = true;
        // 构建带有搜索关键词的URL
        const fetchUrl = `/hotSearch/pageQueryHotSearchByTitle?title=${encodeURIComponent(
            query
        )}&pageNum=${this.currentPage}&pageSize=${this.pageSize}`;
        // 利用axios或者你的HTTP库来发送请求
        apiService
            .get(fetchUrl)
            .then((response) => {
              if (response.data && response.data.success) {
                this.suggestions = response.data.data.value.map((item) => {
                  return {
                    value: item.hotSearchId,
                    label: item.hotSearchTitle,
                    url: item.hotSearchUrl,
                    resource: item.hotSearchResource,
                  };
                });
                this.lastSearchQuery = query;
                callback(this.suggestions);
                // 如果需要处理分页，可以在这里调整 currentPage 和 pageSize
              } else {
                // 处理错误情况
                this.options = [];
                console.error("Failed to fetch search results:", response);
              }
            })
            .catch((error) => {
              // 处理请求错误
              this.options = [];
              console.error("Error during fetch search results:", error);
            })
            .finally(() => {
              this.loading = false;
            });
      } else {
        // 如果没有查询内容，则清空选项
        this.options = [];
      }
    },
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  background: #f8f9fa; /* 提供一个柔和的背景色 */
  min-height: 100vh; /* 使用视口高度确保填满整个屏幕 */
  padding: 0; /* 保持整体布局紧凑，无额外内边距 */
}
</style>

